import React, { Component } from 'react'
import './index.css'
export default class Index extends Component {
  constructor() {
    super(...arguments)
    this.state = ({
      listAll: [1, 2, 3, 4]
    })
  }
  render () {
    const { listAll } = this.state
    return (
      <div>
        <div onClick={this.handleClick.bind(this)}>变化数字</div>
        <div style={{margin: '10px'}}>
          {
            listAll.map((item) => {
              return (
                <div className="turn_box_container" style={{width: '80px', height: '100px'}}>
                  <div className="turn_box" style={ {top:  ( -1 * item * 100) +'px'} }> 
                    {
                      [...new Array(10)].map((item,index) => {
                        return ( <div className="turn_box_number">{index}</div> )
                      })
                    }
                  </div>
              </div>
              )
            })
          }
        </div>
      </div>
    )
    
  }
  // 模拟测试数据
  getNumber(){
    let random = Math.floor(Math.random() * (100000- 1) + 1)    
    let randomString = random.toString()
    let arr = []
    for (var i = 0, len = randomString.length; i < len; i += 1) {
      arr.push(randomString.charAt(i))
    }
    this.setState({
      listAll: arr
    })
  }
  handleClick() {
    this.getNumber()
  }
}